<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar :title="title"></c-nav-bar>
		<view class="bowug">
			{{jieshoudata.name}}
		</view>
		<view class="dizhi">
			<view class="dzxq">
				<view class="gbwdizhi1">
					<image src="https://i.ringzle.com/file/20240424/4a5e33d1acb1471cba562f6f79334815.png" mode="">
					</image>
				</view>
				<view class="gbwdizhi2">
					地址：{{jieshoudata.address}}
				</view>
			</view>
			<view class="bg-purple" @tap="openNavigation">
				<image src="https://i.ringzle.com/file/20240424/42cb6696975b467094cbb72e22ef3682.png" mode=""></image>
			</view>
		</view>
		<view class="tit"><text>预约日期</text></view>
		<view class="date">
			<view :class="['item',index==currentDate?'itemSelected':'']" v-for="(item,index) in dateArr" :key="index"
				@click="handleDate(item,index)">
				<text>{{weeks[item.week]}}</text>
				<text>{{item.time}}</text>
				<text>可预约</text>
			</view>
			<view class="item" @click='timeShow=true'>
				<text>更多</text><text>日期</text>
			</view>
		</view>
		<view class="shangxiawu">
			<view class="shangwu" :class="{'Productactive': Productshowindex == item.id}"
				v-for="(item,index) in yueyuedata" :key="index" @click="yuyue(item,index)">
				<!-- 	<view class="chectyy1" v-show="Productshowindex == item.id">
					<image src="https://i.ringzle.com/file/20240112/62a8e0e95e914f5193af2aa9b87985f0.png" mode="">
					</image>
				</view> -->
				<view class="chectyy2">
					{{item.time}}
				</view>
				<view class="chectyy3">
					{{item.yuyue}}
				</view>
			</view>
		</view>
		<view class="baoming">
			<view class="baoming1">
				报名人员 <span>限5人</span>
			</view>
			<view class="baoming2">
				<!-- <u-button type="primary" :plain="true" size="small" text="+添加" @tap="addPerson"></u-button> -->
				<view class="baoming2-btn" @tap="addPerson">
					+添加
				</view>
			</view>
		</view>
		<view class="shenfz">
			<u-swipe-action>
				<u-swipe-action-item :options="options" v-for="(item, index) in addList" :key="index"
					@click="deletePerson(item)" :ref="'swipeAction' + index">
					<view class="swipe-action u-border-top u-border-bottom">
						<view class="swipe-action__content">

							<view class="sac_item">
								<image class="chk" @tap="selectPerson(index)"
									:src="item.isSelect?'@/static/my/icon_select.png':'https://fsy.shengsi.gov.cn/file/20240906/119a9318c011420ba8b7677bc12fbf00.png'">
								</image>
								<view class="si_info">
									<view class="name">
										<view>{{item.passengerNameCopy}}</view>
										<view>{{typeCfg[item.personType]}}</view>
									</view>
									<view class="idcard">
										<text>{{cardCfg[item.cardType]}}</text>
										<text>{{item.cardCopy}}</text>
									</view>
								</view>
								<image class="edit" src="@/static/my/commonInformation/icon_edit.png"
									@tap="toEdit(item)"></image>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>

		</view>


		<view class="dibu">
			<view class="ruguan">
				<view class="guanyuyue" @click="yuguanyuyue">
					提交
				</view>
			</view>
		</view>


		<u-toast ref="uToast"></u-toast>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
		<u-calendar class="u-time" :show="timeShow" mode="single" @confirm="confirm"
			@close="timeShow=false"></u-calendar>
	</view>
</template>

<script>
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	export default {
		components: {
			GetPhoneNumber
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 56,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				title: '入馆预约',
				dateArr: [],
				weeks: ['周日', '周一 ', '周二', '周三', '周四', '周五', '周六'],
				checkTime: '',
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				currentTime: null,
				currentDate: 0,
				timeShow: false,
				yueyuedata: [{
						id: 0,
						time: '09:00-12:00',
						yuyue: '可预约'
					},
					{
						id: 1,
						time: '12:00-16:30',
						yuyue: '可预约'
					},
				],
				Productshowindex: 0,
				selectyuyueshangwu: '',
				addList: [],
				typeCfg: {
					1: '成人票',
					2: '儿童票',
					3: '免票儿童',
					4: '老人票'
				},
				cardCfg: this.$uct.typeToText,
				jieshoudata: {},



			}
		},
		onLoad(option) {
			this.jieshoudata = JSON.parse(decodeURIComponent(option.item));
			console.log('111111111111111111', this.jieshoudata)

			this.currentTime = this.getDay(0);
			this.getTime();
			this.checkTime = this.getDay(0).time; //默认当天日期
			this.toGetPassengers();
		},
		onShow() {
			this.toGetPassengers();
		},
		methods: {





			yuguanyuyue() {
				this.$refs.uToast.show({
					type: 'success',
					title: '',
					message: "正在对接第三方接口",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				})
			},
			openNavigation() {
				uni.openLocation({
					latitude: this.jieshoudata.latitude,
					longitude: this.jieshoudata.longitude,
					name: this.jieshoudata.name,
					address: this.jieshoudata.address
				})
			},
			toEdit(item, main) {
				if (main) {
					uni.navigateTo({
						url: '/pagesMy/commonInformation/add?type=ship&main=1&item=' + JSON.stringify(
							item),
						events: {
							editPassengerSuccess: data => {
								this.toGetPassengers();
							},
							editPassenger: data => {

							},
						}
					})
				} else {
					uni.navigateTo({
						url: '/pagesMy/commonInformation/add?type=ship&item=' + JSON.stringify(item),
						events: {
							editPassengerSuccess: data => {
								this.toGetPassengers();
							}
						}
					})
				}

			},
			addPerson() {
				this.$login().then(res => {
					if (res === 0) {
						uni.navigateTo({
							url: '/pagesMy/commonInformation/add?type=ship',
							events: {
								addPassengerSuccess: data => {
									this.toGetPassengers();
								}
							}
						})
					} else this.$refs['phoneNumber'].show = true;
				})
			},
			toGetPassengers(callback) {
				this.$api.get('/api/commonPerson/list', {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}).then(res => {
					if (res.data.code === 0) {
						this.addList = this.$uct.setPersonType(res.data.data);
						this.addList.forEach((d, i) => {
							d.passengerNameCopy = this.$aesTm.tuomin(d.passengerName, 1);
							d.cardCopy = this.$aesTm.tuomin(d.card, 3);
							this.$set(this.addList[i], 'isSelect', false);
						})
						callback && callback()
					} else this.$showModal(res.data.msg);
				})
			},
			selectPerson(index) {
				this.$set(this.addList[index], 'isSelect', !this.addList[index].isSelect);
			},
			deletePerson(item) {
				this.$api.del('/api/commonPerson', [item.id]).then(res => {
					if (res.data.code === 0) {
						this.addList.forEach((d, i) => {
							this.$refs['swipeAction' + i][0].closeHandler();
						})
						this.toGetPassengers();
						let fidx = this.fromData.sailTicket.findIndex(d => d.id == item.id);
						if (fidx > -1) this.fromData.sailTicket.splice(fidx, 1);
					} else this.$showModal(res.data.msg)
				})
			},
			confirmAdd() {
				this.addShow = false;
				this.fromData.sailTicket = this.addList.filter(d => d.isSelect == true);
				this.fromData.sailTicket.forEach((d, i) => {
					this.$set(this.fromData.sailTicket[i], 'childs', 0);
					this.$api.get('/api/commonPerson/list', {
						credentialType: d.cardType,
						credentialNum: d.card
					}).then(res => {
						if (res.data.code === 0) {
							this.$set(this.fromData.sailTicket[i], 'discounts', res.data
								.data); //discounts是否有优惠 1是 0否
						} else this.$showModal(res.data.msg);
					})
				})
				this.addList.forEach((d, i) => {
					this.$set(this.addList[i], 'isSelect', false)
				})
				// this.dealTotalPrice();
				this.name = this.fromData.sailTicket[0].name;
				this.phone = JSON.parse(uni.getStorageSync('userInfo')).mobile;
				this.fromData.sailTicket.map(i => {
					i.realName = i.name
					i.idCode = i.card
				})
				console.log(this.fromData.sailTicket, 'this.fromData.sailTicketthis.fromData.sailTicket');
			},
			yuyue(e, index) {
				this.selectyuyueshangwu = e.time;
				this.Productshowindex = index;
			},
			//单程确认选择日期
			confirm(e) {
				console.log(e, '时间单选');
				this.checkTime = e[0];
				this.currentDate = 0;
				this.timeShow = false;
				this.getTime(this.checkTime);
				this.currentTime = this.getDay(0, e[0])
			},
			handleDate(item, index) {
				console.log(item, index);
				this.currentDate = index;
				this.checkTime = item.time;
				this.currentTime = item;
			},
			doHandleMonth(month) {
				var m = month
				if (month.toString().length == 1) {
					m = "0" + month;
				}
				return m;
			},
			getDay(day, currentDate) {
				if (currentDate) {
					var today = new Date(currentDate);
				} else {
					var today = new Date();
				}
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;

				today.setTime(targetday_milliseconds); //注意，这行是关键代码

				var tYear = today.getFullYear();
				this.currentYear = tYear;
				var tMonth = today.getMonth();
				var tDate = today.getDate();
				var week = today.getDay();
				tMonth = this.doHandleMonth(tMonth + 1);
				tDate = this.doHandleMonth(tDate);
				let json = {
					time: tMonth + "-" + tDate,
					week: week,
				}
				return json
			},
			getTime(currentDate) {
				let dateArr = [];
				for (let i = 0; i < 3; i++) {
					let date = this.getDay(i, currentDate);
					dateArr.push(date);
				}
				this.dateArr = dateArr;
			},
		}
	}
</script>

<style scoped lang="less">
	.guanyuyue {
		width: 700rpx;
		height: 80rpx;
		border-radius: 50rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 40rpx;
		background: #007A69;
		color: #fff;
	}

	.dibu {
		width: 750rpx;
		height: 100rpx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		z-index: 999;
	}

	.sac_item {
		display: flex;
		align-items: center;
		padding: 36rpx 24rpx;

		.chk {
			width: 38rpx;
			height: 38rpx;
		}

		.si_info {
			width: calc(100% - 96rpx);
			padding-left: 22rpx;

			.name {
				display: flex;
				align-items: center;

				view:first-child {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #111111;
					line-height: 32rpx;
				}

				view:last-child {
					padding: 3px 4px;
					line-height: 24rpx;
					text-align: center;
					background: #F5F8FA;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #94A9C8;
					margin: 5rpx 0 0 28rpx;
				}
			}

			.idcard {
				margin-top: 20rpx;

				&>text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;
					line-height: 24rpx;

					&:first-child {
						color: #AAAAAA;
						margin-right: 10rpx;
					}
				}
			}
		}

		.edit {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.shenfz {
		width: 710rpx;
		margin: 0 auto 20rpx auto;
	}

	.baoming1 {
		font-size: 30rpx;
		font-weight: bold;

		span {
			font-size: 24rpx;
			font-weight: 10;
			color: #AAAAAA;
			padding-left: 18rpx;
		}
	}

	.baoming {
		width: 710rpx;
		margin: 0 auto 50rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.baoming2-btn {
		width: 102rpx;
		height: 46rpx;
		border-radius: 8rpx;
		border: 1rpx solid #007A69;
		text-align: center;
		line-height: 46rpx;
		font-size: 26rpx;
		font-weight: Bold;
		color: #007A69;
	}

	.Productactive {
		// background-color: #fff !important;
		border: 2rpx solid #007A69 !important;
		color: #007A69 !important;
		font-weight: bold;

		.chectyy2 {
			color: #007A69 !important;
		}

		.chectyy3 {
			color: #007A69 !important;
		}

	}

	.chectyy1 {
		position: absolute;
		top: 0rpx;
		right: 0rpx;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.chectyy3 {
		width: 300rpx;
		height: 50rpx;
		font-size: 26rpx;
		color: #333333;
		text-align: center;
		line-height: 40rpx;
		font-weight: Regular;
	}

	.chectyy2 {
		width: 300rpx;
		height: 50rpx;
		font-size: 24rpx;
		color: #333;
		font-weight: Regular;
		text-align: center;
		line-height: 65rpx;
	}

	.shangwu {
		width: 300rpx;
		height: 100rpx;
		border: 2rpx solid #EFEFEF;
		border-radius: 5rpx;
		position: relative;
		background-color: #FFFFFF;
	}

	.shangxiawu {
		width: 710rpx;
		margin: 0 auto 50rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.date {
		width: 710rpx;
		margin: 0 auto 50rpx auto;
		display: grid;
		grid-template-columns: auto auto auto auto;
		gap: 20rpx;

		.item {
			padding: 20rpx 0;
			border: 2rpx solid #EFEFEF;
			font-size: 24rpx;
			text-align: center;
			border-radius: 16rpx;

			text {
				display: block;
				color: #333;

				&:nth-child(2) {
					margin: 8rpx 0;
				}

				&:nth-child(3) {
					// color: #007A69;
					font-weight: Regular;
				}
			}

			&:last-child {
				padding-top: 40rpx;

				text {
					color: #007A69;

				}

			}
		}

		.itemSelected {
			// background: #B2D7D2;
			border: 2rpx solid #007A69;
			font-size: 24rpx;
			text-align: center;
			border-radius: 16rpx;

			text {
				display: block;
				color: #007A69;
				font-weight: bold;

				&:nth-child(2) {
					margin: 8rpx 0;
					color: #007A69;
				}

				&:nth-child(3) {
					color: #007A69;
				}
			}

			&:last-child {
				padding-top: 40rpx;
				color: #007A69;
			}
		}
	}

	.tit {
		margin-bottom: 20rpx;
		// margin-left: 20rpx;
		border-top: 1rpx solid #EFEFEF;
		padding-top: 20rpx;


		text {
			&:nth-child(1) {
				margin-left: 20rpx;
				font-size: 36rpx;
				color: #111;
				font-weight: bold;
				font-family: PingFang-SC-Bold, PingFang-SC;
			}

			&:nth-child(2) {
				font-size: 24rpx;
				margin-left: 20rpx;
				color: #999;
			}
		}


	}

	.gbwdizhi2 {
		font-size: 26rpx;
		padding-left: 10rpx;
	}

	.dzxq {
		width: 690rpx;
		height: 60rpx;
		display: flex;
		align-items: center;

		.gbwdizhi1 {
			width: 24rpx;
			height: 24rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.dizhi {
		width: 710rpx;
		height: 60rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;

	}

	.bowug {
		width: 100%;
		height: 60rpx;
		font-size: 35rpx;
		font-weight: bold;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.bg-purple {
		width: 106rpx;
		height: 48rpx;

		image {
			width: 100%;
			height: 100%;
		}

	}
</style>